<!--
  Component Basic Usage Component

  This demo shows basic usage of CesiumJS components
  
  Category: Basic

  Component Documentation:
  ========================

  Title: Component Basic Usage
  Description: This demo shows basic usage of CesiumJS components
  Features:
    - TODO: List key features of this demo
  Author: CesiumJS Demo Project
  Date: 8/21/2025
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import { ref } from 'vue';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import { createPoint, createBillboard, createLabel, createPolygon } from '../utils/entityUtils.js';

export default {
  name: 'ComponentBasicUsage',
  components: {
    BaseCesiumViewer
  },
  setup() {
    const cesiumViewer = ref(null);

    // This function is called when the Cesium viewer is ready
    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      // Create a point
      createPoint(viewer, {
        lon: -75.1652,
        lat: 39.9526,
        color: Cesium.Color.RED,
        size: 10,
        name: 'Red Point'
      });

      // Create a billboard
      createBillboard(viewer, {
        lon: -74.0059,
        lat: 40.7127,
        image: './images/logo.png',
        scale: 1.0,
        color: Cesium.Color.BLUE,
        name: 'Blue Billboard'
      });

      // Create a label
      createLabel(viewer, {
        lon: -73.9352,
        lat: 40.7306,
        text: 'New York City',
        color: Cesium.Color.YELLOW,
        font: '16px sans-serif',
        name: 'NYC Label'
      });

      // Create a polygon
      createPolygon(viewer, {
        positions: [
          -74.0, 41.0,
          -73.0, 41.0,
          -73.0, 40.0,
          -74.0, 40.0
        ],
        color: Cesium.Color.GREEN.withAlpha(0.5),
        name: 'Green Polygon'
      });

      // Set the initial camera view
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(-74.0059, 40.7127, 2000000)
      });
    };

    return {
      cesiumViewer,
      onViewerReady
    };
  }
};
</script>

<style scoped>
/* 
  Component Styles
  Add any custom styles for your demo here
*/
</style>